<template>
  <div class="Box-width">

  <el-row type="flex" justify="center" style="margin-top: 78px">
      <el-col :span="7">
        <el-input
          size="small"
          v-model="input"
          style="height: 50px;"
          placeholder="请输入您要搜索的数据资源名称"
        >
        </el-input>
      </el-col>
      <el-button style="background-color: #ff905a">搜索</el-button>
    </el-row>
    
    <div class="Total-resources">
      <el-row type="flex" class="row-bg" justify="center" >
        <el-col :span="4" class="resources-border">
          <div class="Reso-urces" style="margin-right: 15px;">
            资源总量
            <p>
              <span style="font-weight: 700; font-size: 32px">127 </span> 个
            </p>
            <p>
              <span
              class="foo-por"
              style="
                    background-color: #ECECEC;
                    font-size: 14px;
                    color: #999999;
                "
                >今日新增 -</span
              >
              <!-- <img src="../../../img/shouye/向下.png" alt=""></img> -->
            </p>
          </div></el-col
        >
        <el-col :span="10" class="resources-border">
          <el-col :span="8">
            <div class="Resources Resources-first" >
              库表资源总量
              <p>
                <span style="font-weight: 700; font-size: 32px">1 </span>个
              </p>
              <p>
                <span
                 class="foo-por"
                  style="
                    background-color: #ECECEC;
                    font-size: 14px;
                    color: #999999;
                  "
                  >今日新增 -</span
                >
              </p>
            </div>
          </el-col>
          <el-col :span="8">
             <div class="Resources">
              库表数据项总量
              <p>
                <span style="font-weight: 700; font-size: 32px">13 </span>个
              </p>
              <p>
                <span
                 class="foo-por"
                  style="
                    background-color: #ECECEC;
                    font-size: 14px;
                    color: #999999;
                  "
                  >今日新增 -</span
                >
              </p>
            </div></el-col
          >
          <el-col :span="8">
             <div class="Resources" style="margin-right: 15px;">
              库表数据总量
              <p>
                <span style="font-weight: 700; font-size: 32px">788 </span>条
              </p>
              <p>
                <span
                 class="foo-por"
                  style="
                    background-color: #ECECEC;
                    font-size: 14px;
                    color: #999999;
                  "
                  >今日新增 -</span
                >
              </p>
            </div>
            </el-col
          >
        </el-col>

        <el-col :span="10" class="resources-border">
          <el-col :span="8">
             <div class="Resources  Resources-first">
              文件资源总量
              <p>
                <span style="font-weight: 700; font-size: 32px">123 </span>个
              </p>
              <p>
                <span
                 class="foo-por"
                  style="
                    background-color: #ECECEC;
                    font-size: 14px;
                    color: #999999;
                  "
                  >今日新增 -</span
                >
              </p>
            </div></el-col
          >
          <el-col :span="8">
           <div class="Resources">
              文件类型总量
              <p>
                <span style="font-weight: 700; font-size: 32px">1 </span>种
              </p>
              <p>
                <span
                 class="foo-por"
                  style="
                    background-color: #ECECEC;
                    font-size: 14px;
                    color: #999999;
                  "
                  >今日新增 -</span
                >
              </p>
            </div></el-col
          >
          <el-col :span="8">
            <div class="Resources">
              文件大小总量
              <p>
                <span style="font-weight: 700; font-size: 32px">43 </span>MB
              </p>
              <p>
                <span
                 class="foo-por"
                  style="
                    background-color: #ECECEC;
                    font-size: 14px;
                    color: #999999;
                  "
                  >今日新增 -</span
                >
              </p>
            </div></el-col
          >
        </el-col>
      </el-row>
    
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
    };
  },
};
</script>

<style scoped>

.row-bg{
  padding:15px;background-color: white;border-bottom:2px solid #014FE9
}

::v-deep .el-input__inner,.el-button--small{
  border-radius: 0
  }

  ::v-deep .el-input--small .el-input__inner{
    height: 54px;
  }
.el-input {
  z-index: 5;
}
.Box-width {
  width: 1200px;
  margin: 0 auto;
  z-index: 9;
}
.Total-resources {
  /* float: left; */
  height: 166px;
  padding: 15px;
  margin-top: 100px;
  /* background-color: #fff; */
 
}
.Total-resourc{
    height: 166px;
  padding: 15px;
  margin-top: 100px;
  background-color: #fff;
}
.Resources {
  height: 134px;
  background-image: linear-gradient(#E9F2FF , #fff);
  line-height: 35px;
  padding-top: 20px;
  padding-left: 5px;
  border-bottom:1px solid #E9F2FF
}

.Resources-first{
  padding-left: 20px;
}


.Resources span {
  font-weight: 700;
}
.Reso-urces {
  height: 134px;
  background-image: linear-gradient(#E9F2FF , #fff);
  line-height: 35px;
  padding-top: 20px;
  padding-left: 20px;
  border-bottom:1px solid #E9F2FF
}

.Reso-urces span {
  font-weight: 700;
}
.pla-ce{
  width: 120px;
  height: 100px;
}
.box-inp{
  margin: 0 auto;
  height: 48.8px;
  background-color: rgb(187, 46, 46);
}
 .foo-por{
   display: inline-block;
  line-height: 24px;
  padding: 0 7px;
  border-radius: 4px;
 }
 .el-button{
   border: 0px;
   color: #fff;
 }
</style>
